<template>
  <el-col class="activity">
    <el-col class="title">活动列表</el-col>
    <el-col tag="h4">活动项目必须要有活动商品才能启用！</el-col>
    <el-table :data="dataarr" border stripe size="small">
      <el-table-column
        v-for="col in columns2"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
        show-overflow-tooltip
        :sortable="col.pre"
      ></el-table-column>
      <el-table-column label="封面">
        <template slot-scope="scope">
          <div class="ming">
            <img :src="scope.row.cover" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="推广封面">
        <template slot-scope="scope">
          <div class="ming">
            <img :src="scope.row.preview_picture" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="推广封面">
        <template slot-scope="scope">
          <template v-if="scope.row.status">
            <el-button type="warning" @click="endmini(scope.row)" size="mini"
              >禁用</el-button
            >
          </template>
          <template v-else>
            <el-button type="primary" @click="endmini(scope.row)" size="mini"
              >启动</el-button
            >
          </template>
          <el-button type="error" @click="editact(scope.row)" size="mini">
            <i class="el-icon-edit"></i> 修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col>
      <el-button type="primary" @click="addclass" size="mini"
        >创建活动</el-button
      >
    </el-col>
    <el-dialog
      title="添加分类"
      :visible.sync="addascy"
      :append-to-body="true"
      width="50%"
      @close="end"
      :close-on-click-modal="false"
    >
      <el-form size="mini" :model="form" ref="form" label-width="100px">
        <el-form-item label="活动名称" prop="name">
          <el-col :span="8">
            <el-input
              v-model="form.name"
              placeholder="请输入活动名称"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="活动封面" prop="cover">
          <el-col :span="10">
            <template v-if="form.cover">
              <el-tooltip
                class="item"
                effect="dark"
                content="点击删除该图片"
                placement="top-start"
              >
                <img
                  :src="form.cover"
                  alt
                  width="120"
                  class="onimg"
                  @click="editimg('cover')"
                />
              </el-tooltip>
            </template>
            <template v-else>
              <upimg @getpath="getpath" ref="upimg"></upimg>
            </template>
          </el-col>
        </el-form-item>
        <el-form-item label="推广图片">
          <el-col :span="10">
            <el-col tag="strong">图片大小 351*75</el-col>
            <template v-if="form.preview_picture">
              <el-tooltip
                class="item"
                effect="dark"
                content="点击删除该图片"
                placement="top-start"
              >
                <img
                  :src="form.preview_picture"
                  alt
                  width="120"
                  class="onimg"
                  @click="editimg('preview_picture')"
                />
              </el-tooltip>
            </template>
            <template v-else>
              <upimg @getpath="getpath2" ref="upimgs"></upimg>
            </template>
          </el-col>
        </el-form-item>
        <el-form-item label="推广开始时间">
          <el-col :span="10">
            <el-date-picker
              size="mini"
              v-model="form.preview_time"
              type="datetime"
              :picker-options="pickerOptions0"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动周期">
          <el-col :span="20">
            <el-date-picker
              v-model="elcettime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changetime"
              :value-format="'yyyy-MM-dd HH:mm:ss'"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="活动ID">
          <el-col :span="10">
            <el-input v-model="form.activity_id" placeholder="请输入活动id"></el-input>
          </el-col>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{
            editbool ? "立即修改" : "立即创建"
          }}</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer">&nbsp;</span>
    </el-dialog>
  </el-col>
</template>
<script>
import upimg from "@/components/upimg";
import formatDate from "@/lib/intime.js";

export default {
  name: "activity",
  data() {
    return {
      addascy: false,
      elcettime: [],
      dataarr: [],
      columns2: [
        {
          id: "id",
          label: "活动序号",
        },
        {
          id: "name",
          label: "活动名称",
        },
        {
          id: "preview_time",
          label: "活动推广时间",
          pre: true,
        },
        {
          id: "start_time",
          label: "活动开始",
          width: "",
          pre: true,
        },
        {
          id: "end_time",
          label: "结束时间",
          width: "",
          pre: true,
        },
      ],
      page: "",
      form: {
        name: "",
        cover: "",
        preview_picture: "", //活动预推广
        preview_time: "", //推广开始时间
        start_time: "", //开始时间
        end_time: "", //结束时间
        activity_id: "", //活动ID
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      editbool: false,
    };
  },
  components: {
    upimg,
  },
  mounted() {
    this.getlist();
  },
  methods: {
    async getlist() {
      let data = {
        page: this.page,
      };
      let res = await this.$store.dispatch("activity_list_data", data);
      if (!res.code) {
        this.dataarr = res.data.map((item) => {
          item.preview_time = formatDate(item.preview_time);
          item.end_time = formatDate(item.end_time);
          item.start_time = formatDate(item.start_time);
          return item;
        });
      }
      // console.log(res);
    },
    addclass() {
      this.addascy = true;
    },
    end() {
      this.addascy = false;
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.editbool = false;
      this.getlist();
    },
    async onSubmit() {
      // let lang = false;
      // for (let key in this.form) {
      //   if (this.form[key] != "") {
      //     lang = true;
      //   } else {
      //     lang = false;
      //     this.$message.error("请输入完整表单");

      //     return false;
      //   }
      // }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (!this.form.start_time && !this.form.end_time) {
        this.$message.error("请选择活动时间");
      }
      // if (!lang) {
      // this.$message.error("请输入完整表单");
      // } else {
      let res = await this.$store.dispatch("create_ac", this.form);

      if (!res.code) {
        loading.close();
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.end();
      } else {
        loading.close();
      }
      // }
    },
    getpath(path) {
      //封面
      this.form.cover = path;
      return path;
    },
    getpath2(path) {
      this.form.preview_picture = path;
    },
    changetime() {
      //获取到时间
      if (this.elcettime) {
        this.form.start_time = this.elcettime[0];
        this.form.end_time = this.elcettime[1];
      }
    },
    async endmini(row) {
      this.$confirm("该操作将改变当前活动状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.open(row);
        })
        .catch(() => {});
    },
    async open(row) {
      let data = {
        activity_id: row.id,
      };
      let res = await this.$store.dispatch("enable_activity", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
      }
      this.getlist();
    },
    editact(row) {
      this.addascy = true;
      this.editbool = true;

      this.form = row;
      this.form.activity_id = row.id;
      this.elcettime = [new Date(row.start_time), new Date(row.end_time)];
    },
    editimg(data) {
      this.form[data] = "";
    },
  },
};
</script>
<style lang="scss">
.activity {
  text-align: left;
  padding: 20px;
}
.el-drawer__header {
  margin-bottom: 10px;
}
.el-ctable {
  padding: 4px 20px;
}
.pr_h4 {
  background: #ffffff;
  height: 36px;
  line-height: 36px;
}
.error {
  font-size: 30px;
  padding: 20px;
}
.con_tab {
  strong {
    padding-left: 22px;
    font-size: 16px;
    padding-bottom: 10px;
  }
}
.content {
  padding: 5px 12px;
  background: #ffffff;
}
.ref_button {
  margin-left: 12px;
}
.ming {
  width: 45px;
  height: 45px;
  overflow: hidden;
  img {
    width: 100%;
    // height: 100%;
  }
}
.onimg {
  width: 120px;
  height: 120px;
}
</style>